<template>
  <div 
    :class="$style.container" 
    class="video">
    <div 
      v-if="film.videoUrl" 
      id="video"
      :class="$style.video"/>
    <div 
      v-else 
      :class="$style.noVideo">
      暂无视频播放
    </div>
    <section :class="$style.info">
      <div :class="$style.left">
        <h4>{{ film.original_title }}</h4>
        <span 
          :class="$style.rate">{{ film.rate }}</span>
        <p>
          <span 
            v-for="(item,idx) in film.countries.concat(film.year).concat(film.genres)" 
            :key="idx+'desc'">{{ item }}</span>
        </p>
      </div>
      <div 
        :class="
        $style.right"/>
    </section>
    <section :class="$style.desc">
      <h4>《{{ film.original_title }}》简介</h4>
      <span :class="$style.director">导演:{{ film.directors.map(item => item.name).join('、') }}</span>
      <span :class="$style.actor">演员:{{ film.actors.map(item => item.name).join('/') }}</span>
      <p>{{ film.summary }}</p>
    </section>
  </div>
</template>

<script>
export default {
  props: {
    film: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      player: null
    }
  },
  mounted() {
    if (this.film.videoUrl) {
      this.player = new Player({
        id: 'video',
        url: this.film.videoUrl,
        fluid: true,
        poster: this.film.coverurl || this.film.poster,
        playbackRate: [0.5, 0.75, 1, 1.5, 2],
        pip: true,
        keyShortcut: 'on'
      })
    }
  },
  beforeDestory() {
    this.player.destroy()
  }
}
</script>

<style lang='scss' module>
.container {
  overflow: hidden;
  .video {
    margin: 50px auto;
    padding-top: 0px !important;
    width: 1000px;
    height: 450px !important;
  }
  .noVideo {
    margin: 50px auto;
    width: 1000px;
    height: 450px;
    line-height: 450px;
    text-align: center;
    color: #666;
    font-size: 16px;
    border: 1px solid #666;
  }
  .info {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    .left {
      h4 {
        display: inline-block;
        color: #202020;
        font-size: 26px;
        font-weight: 500;
      }
      .rate {
        margin: 0px 12px;
        font-size: 32px;
        color: #e36049;
        height: 36px;
        line-height: 36px;
      }
      p {
        margin-top: 10px;
        span {
          margin-right: 6px;
          padding: 1px 4px 1px;
          line-height: 18px;
          border-radius: 2px;
          color: #999;
          background-color: #3d3d46;
          &:hover {
            color: #e36049;
          }
        }
      }
    }
    .right {
    }
  }
  .desc {
    margin-top: 30px;
    h4 {
      margin-bottom: 20px;
      font-size: 32px;
      font-weight: 500;
      color: #202020;
    }
    span {
      margin-bottom: 2px;
      color: #666;
    }
    .director {
    }
    .actor {
      margin-left: 20px;
    }
    p {
      margin-top: 20px;
      font-size: 13px;
      line-height: 24px;
      color: #202020;
    }
  }
}
</style>
<style scoped>
.video >>> .xgplayer {
  background: #2e2e36;
}
</style>
